<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- submit을 button으로 변경한다. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>검색 폼</title>
<script type="text/javascript">
var xhr;
//XMLHttpRequest 생성 함수
function createXHR(){
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		xhr = new XMLHttpRequest();
	}
}

//마일리지로 조회처리
function searchByMileage(){
	
	var sM = document.getElementById("sMileage");
	var eM = document.getElementById("eMileage");
	//마일리지가 숫자가 아니면 조회할 필요 없다.
	if(window.isNaN(sM.value)||window.isNaN(eM.value)){
		sM.value ="";
		eM.value="";
		alert("마일리지는 숫자를 넣으세요");
		return;
	}
	//앞이 뒤보다 크면 조회할 필요 없다.
	if(parseInt(sM.value)>parseInt(eM.value)){
		alert("검색 조건을 확인하세요");
		return;
	}
	
	createXHR();
	xhr.onreadystatechange = getResult;
	var url = "/MemberManagerFC_ibatis_inst/controller";
	var queryString = "command=searchByMileageRange2&sMileage="+sM.value+
										"&eMileage="+eM.value;
	xhr.open("post", url, true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(queryString);
}

//이름으로 조회처리
function searchByName(){
	createXHR();
	var url = "/MemberManagerFC_ibatis_inst/controller";
	var queryString = "command=searchMemberByName2&name="+document.getElementById("name").value;
	xhr.onreadystatechange = getResult;
	xhr.open("POST", url, true);
	xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
	xhr.send(queryString);
}
/*
 * getResult() : 서버로 부터 조회결과를 받아 화면에 출력한다.
 *					  모든 조회에 공통으로 사용한다.ㄴ
 */
function getResult(){
	if(xhr.readyState == 4){
		if(xhr.status==200){
			var txt = xhr.responseText;
			var jObj = eval("("+txt+")");
			document.getElementById("title").innerHTML = jObj.title;
			document.getElementById("keyword").innerHTML = "검색 조건 : "+jObj.keyword;
			var memList = jObj.member_list;
			var tbody = document.getElementById("tbody");
			//tbody 삭제
			while(tbody.hasChildNodes()){
				tbody.removeChild(tbody.firstChild);
			}
			//조회결과 tbody에 추가
			for(var i = 0; i<memList.length; i++){
				
				var mem = memList[i];
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				td1.innerHTML = mem.id;
				var td2 = document.createElement("td");
				td2.innerHTML = mem.password;
				var td3 = document.createElement("td");
				td3.innerHTML = mem.name;
				var td4 = document.createElement("td");
				td4.innerHTML = mem.registerNumber1+"-"+mem.registerNumber2;
				var td5 = document.createElement("td");
				td5.innerHTML = mem.mileage;
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tbody.appendChild(tr);
			}
			
		}else{
			alert("서버오류 : "+xhr.status+", "+xhr.statusText);
		}
	}
}
</script>
</head>
<body>
<h2>회원 검색</h2>
<font color="red" size="2">${requestScope.error_message }</font>

<input type="hidden" name="command" value="searchByMileageRange">
마일리지 범위 : <input type="text" name="sMileage" id="sMileage">~<input type="text" name="eMileage" id="eMileage">
<input type="button" value="마일리지 범위로 조회" onclick="searchByMileage()">

<p>

이름 : <input type="text" name="name" id="name">
<input type='hidden' name="command" value="searchMemberByName">
<input type="button" value="이름으로 검색" onclick="searchByName()">

<hr>

<h2><span id="title"></span></h2>
<h2><span id="keyword"></span></h2>
<table width="550" border="1">
	<thead>
		<tr>
			<td>ID</td>
			<td>Password</td>
			<td>이름</td>
			<td>주민번호</td>
			<td>마일리지</td>
		</tr>
	</thead>
	<tbody id="tbody"></tbody>
</table>

</body>
</html>










